import React from 'react';
import { BrowserRouter as Router, Navigate, Route, Routes } from 'react-router-dom';
import './App.css';
import LayoutGrid from './pages/Layout/Grid';
import LayoutFlex from './pages/Layout/Flex';
import HolyGrailLayout from './components/HolyGrailLayout';

const App: React.FC = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<HolyGrailLayout />}>
          <Route index element={<LayoutGrid />} />
          <Route path="layout/grid" element={<LayoutGrid />} />
          <Route path="layout/flex" element={<LayoutFlex />} />
        </Route>
        <Route path="*" element={<Navigate to="/" />} />
      </Routes>
    </Router>
  );
};

export default App;
